  <template>
  <div class="g-header">
    <div class="g-header-content g-padding-x pl-[32px]">
      <div class="g-header-left">
        <GLink :to="gitcodeFeUrl">
          <div class="g-header-logo"></div>
        </GLink>
        <div class="g-header-logo-small h-[28px]">
          <GLink :to="gitcodeFeUrl">
            <GIcon name="gt-logo-picture" size="28" />
          </GLink>
        </div>
        <GIcon v-show="isNewsDetail && showMenu" class="menu_mb" name="gt-line-list" size="16px" @click="openMenu" />
      </div>
      <div class="g-header-right">
        <ClientOnly>
          <d-button class="btn-create-activity" @click="handleCreateActivity">
            <GIcon name="gt-line-add-little" size="16px" color="var(--theme-light-text)" />
            {{ $t('activity.createActivity') }}
          </d-button>
          <Lang />
        </ClientOnly>
      </div>
    </div>
  </div>
  
  <div class="g-menu mobile-menu">
    <NavMenus class="g-header-menu" />
  </div>
</template>
<script lang='ts' setup>
import NavMenus from './components/nav-menus.vue';
import Lang from './Lang.vue'
import { transformUrl } from '@/utils/tools'
import { ACTIVITY_CREATE_FORM_URL } from '@/constant'

const open = ref(false)
const showMenu = ref(false)
const route= useRoute()
const isNewsDetail = computed(()=>{
  return route.name === `news-detail`
})

const gitcodeFeUrl = transformUrl(`${(import.meta as any).env.VITE_FE_HOST}?p=seo`)
//打开目录
const openMenu = () => {
  open.value = !open.value
  emitEvent('openMenu', { open: open.value })
}

//关闭目录
addEmitEvent('closeMenu', (close) => {
  open.value = close
})


//移动端显示目录
addEmitEvent('showMobileMenu', (close) => {
  showMenu.value = close
})

const handleCreateActivity = () => {
  if(process.client){
    window.open(ACTIVITY_CREATE_FORM_URL, '_blank')
  }
}
</script>
<style scoped lang="scss">
.g-header {
  min-height: var(--header-height);

  &-content {
    background-color: #fff;
    top: 0;
    width: 100%;
    z-index: 6;
    position: fixed;
    border-bottom: 1px solid #F1F1F8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 40px;
    @media screen and (max-width: 768px) {
      padding-right: 16px;
    }
  }

  &-left {
    display: flex;
    align-items: center;
    height: var(--header-height);
  }
  &-right {
    display: flex;
    align-items: center;
    gap: 16px;
    @media screen and (max-width: 768px) {
      gap: 8px;
    }
    .btn-create-activity {
      border-radius: 16px;
      padding-left: 16px;
      padding-right: 16px;
      background-color: var(--theme-primary);
      color: var(--theme-light-text);
    }
  }

  &-logo {
    display: inline-block;
    width: 220px;
    height: var(--header-height);
    background: url('https://cdn-static.gitcode.com/static/images/bind-logo-dark.png') no-repeat;
    background-size: contain;
    vertical-align: middle;
    background-position: 0 center;
    &-small {
      display: none;
    }
  }
}
.g-menu {
  min-height: 48px;

  .g-header-menu {
    position: fixed;
    top: calc(var(--header-height) + 1px);
    left: 0;
    width: 100%;
    z-index: 6;
    background-color: #fff;
    box-sizing: border-box;
  }
}
.pc-menu {
  display: flex;
  @media screen and (max-width: $screen-sm-lg) {
    display: none;
  }
}
.mobile-menu {
  display: none;
  @media screen and (max-width: 768px) {
    display: flex;
  }
}
@media screen and (min-width: $screen-lg) {
  .menu_mb {
    display: none !important;
  }


}

@media screen and (max-width: $screen-lg) {
  .menu_mb {
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg) !important;
  }
}

@media screen and (max-width: $screen-md) {
  .g-header-logo {
    display: none;
  }

  .g-header-logo-small {
    display: inline-block;
  }


}
</style>
